<template lang="pug">
div
  app-header(fixed,title="首页",v-if="!$helper.isWechat")
  app-search-toolbar(:city="true")
  div(ref="mainWrapper",class="main-wrapper",:style="{top: $helper.isWechat ? '0.87rem' : '1.75rem'}")
    div
      //- 滚动图片
      mt-swipe(:auto="4000")
        mt-swipe-item(v-for="(banner,index) in banners",:key="index")
          img(:src="banner.picture")
      //- 分类
      .category-icon
        ul.row
          li(v-for="(item,index) in categoryIcon1",:key="index",@click="$router.push(item.url)")
            img(:src="_.config['static_uri'] + '/' + item.icon")
            span {{item.title}}
        ul.row
          li(v-for="(item,index) in categoryIcon2",:key="index",@click="$router.push(item.url)")
            img(:src="_.config['static_uri'] + '/' + item.icon")
            span {{item.title}}
      //- 专题
      section.category_box
        app-activity-card(v-for="(item,index) in activities",:key="index",:model="item")
      div.cover(v-show="scrolling")
      //- 菜单图标
      section.icon_item
        ul
          li(v-for="item in iconItems") {{item.title}}
  app-footer(active="home",@handler="footerHandler")
  #customer-service(@click="$router.push('/user/contact')")
</template>

<script>
import BScroll from 'better-scroll'
import { Button, Swipe, SwipeItem } from 'mint-ui'
import ActivityCard from 'components/ActivityCard'
import Footer from 'components/Footer'
import Header from 'components/Header'
import SerachToolbar from 'components/SerachToolbar'
import { mapGetters } from 'vuex'

export default {
  components: {
    'mt-button': Button,
    'mt-swipe': Swipe,
    'mt-swipe-item': SwipeItem,
    'app-footer': Footer,
    'app-header': Header,
    'app-search-toolbar': SerachToolbar,
    'app-activity-card': ActivityCard
  },
  computed: {
    ...mapGetters({
      banners: 'getBanners',
      activities: 'getActivities'
    })
  },
  data () {
    return {
      mainScroll: null,
      scrolling: false,
      categoryIcon1: [
        {title: '开工必备', url: '/sorts/index/1', icon: 'img/icon1.png'},
        {title: '水', url: '/sorts/index/2', icon: 'img/icon2.png'},
        {title: '电', url: '/sorts/index/3', icon: 'img/icon3.png'},
        {title: '木', url: '/sorts/index/4', icon: 'img/icon4.png'}
      ],
      categoryIcon2: [
        {title: '瓦', url: '/sorts/index/5', icon: 'img/icon5.png'},
        {title: '油', url: '/sorts/index/6', icon: 'img/icon6.png'},
        {title: '五金', url: '/sorts/index/7', icon: 'img/icon7.png'},
        {title: '工具', url: '/sorts/index/8', icon: 'img/icon8.png'}
      ],
      iconItems: [
        {title: '正品低价', url: ''},
        {title: '免费送货', url: ''},
        {title: '4 小时达', url: ''},
        {title: '售后保障', url: ''}
      ]
    }
  },
  async created () {
    this._initScroll()
  },
  methods: {
    _initScroll () {
      if (!this.mainScroll) {
        this.$nextTick(() => {
          this.mainScroll = new BScroll(this.$refs.mainWrapper, {
            probeType: 1,
            click: true,
            scrollbar: {
              fade: true,
              interactive: false
            }
          })
          this.mainScroll.on('scrollStart', () => {
            this.scrolling = true
          })
          this.mainScroll.on('scrollEnd', () => {
            this.scrolling = false
          })
        })
      } else {
        this.mainScroll.refresh()
      }
    },
    footerHandler (type) {
      this.$router.push({name: type + ':index'})
    }
  }
}
</script>
<style lang="stylus" scoped>
.main-wrapper
  position: absolute
  left: 0
  right: 0
  bottom: 1.3rem
  overflow: hidden
  .cover
    background: rgba(255, 255, 255, 0)
    width: 100%
    height: 100%
    position: absolute
    top: 0
    left: 0
    z-index: 1
.mint-swipe
  height: 4rem
  background: #efefef
  img
    width: 100%
    height: auto
.category-icon
  width: 100%
  clear: both
  box-sizing: border-box
  .row
    display: flex
    width: 94%
    margin: 0 auto
    justify-content: space-between
    flex-direction: row
    flex-wrap: wrap
    clear: both
    padding: .2rem 0
    padding-top: .4rem
    border-bottom: 1px solid #ccc
    &:last-child
      border-bottom: none
  li
    float: left
    height: 1.6rem
    width: 1.6rem
    text-align: center
    cursor: pointer
    list-style: none
    color: #666
    span
      display: inline-block
      width: 100%
      font-size: .4rem
    img
      width: .7rem

.icon_item ul
  display: -webkit-box
  display: -webkit-flex
  display: flex
  width: 100%
  background: #f5f5f5
  padding: 0.22rem 0
  border-top: 1px solid #ddd
  list-style: none
  li
    -webkit-box-flex: 1
    -webkit-flex: 1
    flex: 1
    text-align: center
    position: relative
    color: #848484
    font-size: 0.35rem
    &:nth-child(1):before
      background-position: 0 -2rem
    &:nth-child(2):before
      background-position: -2rem -2rem
    &:nth-child(3):before
      background-position: -4rem -2rem
    &:nth-child(4):before
      background-position: -6rem -2rem
    &:before
      content: ''
      display: block
      width: 1.34rem
      height: 1.34rem
      margin: 0 auto
      margin-bottom: .1333rem
</style>
